<template>
	<view>
		<block v-for="(item,index) in list" :key="index">
			<view class="slider-info" @tap="$emit('onCliskShow',index)">
				<view class="slider-left">
					<view class="unread" v-if="item.isNotRead">
						<image class="unread-image" src="../../static/images/xiaoxi/tongzhi.png" mode="widthFix"></image>
						<view class="unread-dian"></view>
					</view>
					<image v-else class="read-image" src="../../static/images/xiaoxi/tongzhi2.png" mode="widthFix"></image>
				</view>
				<view class="slider-right">
					<view class="slider-text-l" :class="{'active':item.isNotRead}">{{item.name}}</view>
					<view class="slider-text-r">
						<view class="text-r-date" :class="{'mr':!item.isEmergency}">{{item.date}}</view>
						<view class="text-r-message">
							<image v-show="item.isEmergency" class="text-r-img" src="../../static/images/xiaoxi/jinji.png" mode="widthFix"></image>
							<view class="text-r-text">查看</view>
						</view>
					</view>
				</view>
			</view>		
		</block>
	</view>
</template>

<script>
	export default {
		props:{
			list: {
				type: Array,
				required: true
			}
		}
	}
</script>

<style scoped lang="less">
	.slider-info{
		padding: 0 72rpx;
		// height: 116rpx;
		height: 7.59vh;
		display: flex;
		align-items: center;
		.slider-left{
			display: flex;
			align-items: center;
			height: 100%;
			.unread{
				display: flex;
				align-items: center;
				height: 100%;
				position: relative;
				margin-right: 66rpx;
				.unread-image{
					width: 32rpx;
					height: 40rpx;
				}
				.unread-dian{
					width: 16rpx;
					height: 16rpx;
					background: #FF6262;
					position: absolute;
					right: -6rpx;
					top: 36rpx;
					border-radius: 16rpx;
				}
			}
			.read-image{
				width: 32rpx;
				height: 40rpx;
				margin-right: 66rpx;
			}
		}
		.slider-right{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100%;
			border-bottom: 1rpx solid #E8F2FF;
			.slider-text-l{
				font-size: 40rpx;
			}
			.slider-text-r{
				display: flex;
				align-items: center;
				.text-r-date{
					font-size: 36rpx;
					color: #777777;
					margin-right: 102rpx;
				}
				.text-r-message{
					display: flex;
					align-items: center;
					.text-r-img{
						width: 10rpx;
						height: 36rpx;
						margin-right: 20rpx;
					}
					.text-r-text{
						font-size: 36rpx;
						color: #777777;
					}
				}
			}
		}
	}
	.active{
		color: red;
	}
	.mr{
		margin-right: 132rpx !important;
	}
</style>
